<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="./js/rem.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
    <style>
        *{
			margin: 0;
			padding: 0;
		}
        html,body{
			height: 100%;
		}
        .box{
            height: 100%;
			display: flex;
			flex-direction: column;
        }
        header{
            /* background-color: red; */
        }
        header input{
            width: 100%;
            /* margin-bottom: 10px; */
        }
        nav{
            /* margin-top: 0.2rem; */
            margin: 0.2rem 0;
        }
        nav button{
            background-color: rgb(255, 0, 157);
            font-size: 0.1rem;
            width: 0.7rem;
            height: 0.4rem;
            border: 0;
            color: white;
            margin-left: 0.2rem;
        }
        main{
            /* background-color: yellow; */
            flex: 1;
        }
        footer{
            
            height: 0.7rem;
            display: flex;
            /* background-color: green; */
            justify-content: space-around;
            border-top: 1px solid #aaa;
        }
        footer a{
            color: #aaa;
            text-decoration: none;

        }
        footer span{
            color: #aaa;
        }
        .hos-sale a{
            color: rgb(255, 0, 157);
        }
        .hos-sale span{
            color: rgb(255, 0, 157);
        }
        .home,.hos-sale,.cart,.my{
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
        }
        .lis{
            width: 50%;
            /* height: 6rem; */
            /* display: flex;
            flex-direction: column; */
            margin-top: 0.5rem;
        }
        li{
            list-style: none;
        }
        .title{
            white-space:nowrap; 
            overflow:hidden;
            text-overflow:ellipsis;

        }
        .sp{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .price{
            color: red;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="box">
        <header>
            <input type="text" placeholder="请输入关键词按下回车键进行过滤">
        </header>
        <nav>
            <button>随机</button>
            <button>价格</button>
            <button>销量</button>
        </nav>
        <main>
            <ul class="sp">
                <!-- <li>ni</li> -->
            </ul>
        </main>
        <footer>
            <div class="home">
                <a href="" class="iconfont icon-shouye1-copy"></a>
                <span>首页</span>
            </div>
            <div class="hos-sale">
                <a href="" class="iconfont icon-remai"></a>
                <span>热卖</span>
            </div>
            <div class="cart">
                <a href="" class="iconfont icon-gouwuche"></a>
                <span>购物车</span>
            </div>
            <div class="my">
                <a href="" class="iconfont icon-wodedangxuan"></a>
                <span>我的</span>
            </div>
        </footer>
    </div>
    <script>
        let url = './books.json'
        axios.get(url).then((res)=>{
            console.log(res.data);
            let res2 = res.data.map((v)=>
            
					`
					<li class="lis">
                        <img src="${v.img}" alt="">
                        <p class="title">${v.title}</p>
                        <p>${v.author}</p>
                        <p class="price">价格:￥${v.price}</p>
                        <p>销量:${v.sales}</p>
					</li>
					`
                )
            $('.sp').html(res2.join(""))
            // console.log($(".sp").html(res2.join("")))

            //价格
            $("button").eq(1).click(function(){
            axios.get(url).then((res) => {
               let res3 = res.data;
            //    console.log(res3);
               let str = res3.sort(function (a, b) {
                  if (b.price > a.price) {
                  return a.price - b.price;
               }
            });
               console.log(str);
               let str1 = str.map((v) =>
               `  
                <li class="lis">
                    <img src="${v.img}" alt="">
                    <p class="title">${v.title}</p>
                    <p>${v.author}</p>
                    <p class="price">价格:￥${v.price}</p>
                    <p>销量:${v.sales}</p>
				</li>
  
               `
           );
           $("ul").html(str1.join(""));
           });
        });
        //销量
           $("button").eq(2).click(function(){
               axios.get(url).then((res) => {
                   let res4 = res.data;
                //    console.log(res4);
                   let xl = res4.sort(function (a, b) {
                       if (a.sales > b.sales) {
                           return b.sales - a.sales;
                       }
            });
            console.log(xl);
            let xl1 = xl.map((v) =>
               `  
                <li class="lis">
                    <img src="${v.img}" alt="">
                    <p class="title">${v.title}</p>
                    <p>${v.author}</p>
                    <p class="price">价格:￥${v.price}</p>
                    <p>销量:${v.sales}</p>
				</li>
  
               `
           );
           $("ul").html(xl1.join(""));
           });
        });
        //检索
        let ipt = document.querySelector("input")
        console.log(ipt);
        ipt.oninput=function(){
            let ipt2 = ipt.value
            console.log(ipt2);
            let arrs = res.data.filter(function(v){
               return v.title.indexOf(ipt2) !=-1
            })
             console.log(arrs);
             list(arrs,ipt2)
             list(res.data)
             function list(arr,ipt2){
                let js = arr.map((v) =>
               `  
                <li class="lis">
                    <img src="${v.img}" alt="">
                    <p class="title">${v.title}</p>
                    <p>${v.author}</p>
                    <p class="price">价格:￥${v.price}</p>
                    <p>销量:${v.sales}</p>
				</li>
  
               `
           );
           $("ul").html(js.join(""));
        }
        }
        
        //随机
        $("button").eq(0).click(function(){
            $('.sp').html(res2.join(""))
        })
    })
    </script>
</body>
</html>